<template>
  <div>
    <div class="scroll-wrap">
      <p class="field">
        <span class="label">姓名:</span>
        <input
          v-model="form.name"
          type="text"
          placeholder="请输入姓名"
          class="input"
        />
      </p>
      <p class="field">
        <span class="label">身份证号:</span>
        <input
          v-model="form.idCard"
          type="text"
          placeholder="请输入证件号"
          class="input"
          maxlength="18"
        />
      </p>
      <p class="tip">
        <i-icon type="feedback" size="28" color="#e05b49" />&nbsp;&nbsp;请保证证件号真实有效
      </p>
      <button class="btn-action-red" @click="next">提交</button>

      <!-- 这下面是弹窗 -->
      <div v-if="showPopup" class="zz" @click="hidePopupClick"></div>
      <div v-if="showPopup" class="popupDiv">
        <div class="wrap">
          <h1 class="title">选择您的线下实业宝类型</h1>
          <div class="body">
            <div class="select">
              <span
                v-for="(item, idx) in list"
                :key="idx"
                class="tag"
                :class="{ selected: category === item.id }"
                @click="category = item.id"
              >{{ item.name }}</span>
            </div>
          </div>
          <button
            :disabled="category === null"
            class="btn-action-red"
            @click="next2"
          >下一步</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myMixin from '../mixins'
import { getCurrentPageParams, validateIdCard } from '@/utils'
import { FIND_SHOP_TYPE_LIST } from '@/api/new-open-shop'

export default {
  mixins: [myMixin],
  data () {
    return {
      form: { name: '', idCard: '' },
      showPopup: false,
      list: [],
      category: null
    }
  },
  onShow () {
    this.findShopTypeList()
  },
  methods: {
    verify () {
      let result = true
      let rules = [
        { key: 'name', message: '请输入姓名' },
        { key: 'idCard', message: '请输入身份证号' }
      ]

      for (const i of rules) {
        if (this.form.hasOwnProperty(i.key) && this.form[i.key]) {
          // do nothing
          if (i.key === 'idCard' && !validateIdCard(this.form[i.key])) {
            result = false
            this.$toast('请输入正确的身份证号')
            break
          }
        } else {
          result = false
          this.$toast(i.message)
          break
        }
      }
      return result
    },
    hidePopupClick () {
      this.showPopup = false
    },
    next () {
      if (this.verify()) {
        if (this.openShopIdentity === 'ENTITY') {
          this.showPopup = true
        } else {
          this.updateSubmitData(this.form)

          // this.$router.push({
          //   name: 'open-shop-pay-shop-info',
          //   query: this.$route.query
          // })
          this.$router.push(`/pages/new-open-shop/shop-info/main`)
        }
      }
    },
    next2 () {
      this.updateSubmitData({
        ...this.form,
        shopTypeIdList: [this.category]
      })

      // this.$router.push({
      //   name: 'open-shop-pay-upload',
      //   query: this.$route.query
      // })
      this.$router.push(`/pages/new-open-shop/upload/main`)
    },
    /* api */
    findShopTypeList () {
      const vm = this

      const providerId =
        vm.$store.state.account.providerId || getCurrentPageParams('providerId')

      FIND_SHOP_TYPE_LIST(providerId)
        .then(r => {
          if (r.data.code === '0') {
            vm.list = (r.data.data || []).map(_ => ({
              name: _.typeName,
              id: _.shopTypeId
            }))
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('../styles/index.css');

$gray: #f6f6f6;

.scroll-wrap {
  background-color: $gray;
  padding-top: 10px;
  > .tip {
    background-color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #bdbdbd;
    padding: 10px 20px;
    margin-bottom: 30px;
  }
}
.zz {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0.3;
}
.popupDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  .wrap {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    width: calc(100vw - 40px);
    height: 50vh;
    position: relative;
    > .title {
      font-size: 18px;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }
    > .body {
      width: 100%;
      height: calc(100% - 60px - 50px);
      padding: 0 5px;
      overflow: hidden;
      overflow-y: auto;
      > .select {
        padding: 0 10px;
        display: grid;
        grid-template-columns: repeat(3, 30%);
        column-gap: 5%;
        > .tag {
          width: 100%;
          text-align: center;
          border: 1px solid #333;
          margin: 5px 0;
          font-size: 12px;
          line-height: 18px;
          border-radius: 10px;
          &.selected {
            color: #fff;
            border-color: #ea435f;
            background-color: #ea435f;
          }
        }
      }
    }
  }
}
</style>
